<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'

// cesium初始化必须写在mounted生命周期里面，否则会报错"Element with id "cesiumContainer" does not exist in the document."
onMounted(() => {
  const viewer = new Cesium.Viewer('cesiumContainer', {
    shadows: false,
    animation: false, // 是否创建动画小器件，左下角仪表
    baseLayerPicker: false, // 是否显示图层选择器
    fullscreenButton: false, // 是否显示全屏按钮
    geocoder: false, // 是否显示geocoder小器件，右上角查询按钮
    homeButton: false, // 是否显示Home按钮
    infoBox: false, // 是否显示信息框
    sceneModePicker: false, // 是否显示3D/2D选择器
    selectionIndicator: false, // 是否显示选取指示器组件
    timeline: false, // 是否显示时间轴
    navigationHelpButton: false, // 是否显示右上角的帮助按钮
    scene3DOnly: true, // 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
    shouldAnimate: true, // 自动播放动画
  })
  viewer.cesiumWidget.creditContainer.style.display = 'none' // 去除底部水印
})
</script>

<template>
  <div id="cesiumContainer" class="relative">
    <div class="z-100 absolute top-0 left-0 right-0 text-white text-center font-bold text-4xl">
      茶博园
    </div>
  </div>
</template>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
